<template>
  <div class="fb">
    <van-nav-bar
        title="发布房源"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <van-row class="img">
      <van-col span="24">
        <img :src="img" alt="">
      </van-col>
    </van-row>
    <van-row class="body">
      <van-col span="24">
        <div>
          <p>{{res.description}}</p>
          <van-tag color="#e1f5f8" text-color="#39becd" v-for="(item,index) in res.tags" :key="index">{{item}}</van-tag>
        </div>
        <div>
          <van-row class="zj">
            <van-col span="8">
                <div class="res">{{res.price}}/月</div>
                <div>租金</div>
            </van-col>
            <van-col span="8">
                <div class="res">{{res.roomType}}</div>
                <div>房型</div>
            </van-col>
            <van-col span="8">
                <div class="res">{{res.size}}平米</div>
                <div>面积</div>
            </van-col>
          </van-row>
        </div>
        <div>
          <van-row class="zhuangx">
            <van-col span="12">
              <div>装修：<span>精修</span></div>
              <div>楼层: <span>{{res.floor}}</span></div>
            </van-col>
            <van-col span="12">
              <div>朝向：<span>{{res.oriented[0]}}</span></div>
              <div>类型: <span>普通住宅</span></div>
            </van-col>
          </van-row>
        </div>
      </van-col>
    </van-row>
    <van-row class="peizhi">
      <van-col span="24">
        <div>小区：<span>{{res.commuity ? res.commuity : '未知'}}</span></div>
        <div class="img"><img :src="img" alt=""></div>
        <div>
          <p>房屋配置</p>
          <van-grid>
            <van-grid-item v-for="(item,index) in res.supporting" :key="index" icon="photo-o" :text="item" />
          </van-grid>
        </div>
      </van-col>
    </van-row>
    <div class="bottom">
      <button @click="this.xing = !this.xing">
        <van-icon class="da" v-if="xing" name="star" />
        <van-icon v-else name="star-o" />
        收藏
      </button>
      <button>在线咨询</button>
      <button class="green">

        电话预约</button>
    </div>
  </div>
</template>

<script>
import { getHouseId } from '@/api/detail'
export default {
  data () {
    return {
      id: '',
      res: '',
      img: '',
      xing: false
    }
  },
  async created () {
    this.id = this.$route.params.id
    const res = await getHouseId(this.id)
    this.res = res.body
    this.img = 'http://liufusong.top:8080' + res.body.houseImg[0]
    console.log(res)
  }
}
</script>

<style lang='less' scoped>
.da{
  color: #fa5741;
}
.bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100vw;
  height: 50px;
  justify-content: center;
  align-items: center;
  button{
    border-radius: 0;
    border: 1px solid #e8e8e9;
    font-size: 17px;
    height: 100%;
    color: #999;
    flex: 1;
  }
  .green{
    background-color: #21b97a;
    color: #fff;
  }
}
.van-grid.van-hairline--top{
  margin-bottom:100px;
}
body{
  background-color: #999;
}
.img{
  height: 252px;
  overflow: hidden;
  img{
    width: 100%;
  }
}
.body{
  padding: 15px;
  background: #fff;
  margin-bottom:30px;
  box-shadow:1px 1px 5px #999;
  .zj{
    text-align: center;
    padding:15px 0;
    margin:15px 0;
    border-bottom:1px solid #cecece;
    border-top:1px solid #cecece;
    .res{
      color: #fa5741;
      font-size: 18px;
      font-weight: bolder;
    }
    div{
      color: #999;
      font-size: 14px;
    }
  }
}
.zhuangx{
  font-size: 13px;
  color:#999;
  span{
    margin-left: 5px;
    font-size: 13px;
    color: #333;
  }
}
.peizhi{
  height: 44px;
  padding-left:10px;
  line-height: 44px;
  font-size:14px;
  color: #666;
  .img{
    height: 145px;
  }
  p{
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #cecece;
  }
  span{
    color: #333;
  }
}
</style>
